<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>maopaoEvents</title>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: yellow;}
        .content{width: 200px;height: 200px;background-color: aqua;}
        .box{width: 100px;height: 100px;background-color: brown;}
    </style>
</head>
<body>
    <h2>事件冒泡</h2>
    <div class="wrapper">
        <div class="content">
            <div class="box"></div>
        </div>
    </div>
    <h2>由子元素到父元素</h2>
    <hr>
    <h2>事件捕获</h2>
    <div class="wrapper">
        <div class="content">
            <div class="box"></div>
        </div>
    </div>
    <h2>由父元素到子元素</h2>
    <script>

        //事件冒泡
        var wrapper = document.getElementsByClassName("wrapper")[0];
        var content = document.getElementsByClassName("content")[0];
        var box = document.getElementsByClassName("box")[0];

        //触发wrapper
        wrapper.addEventListener('click',function () {//点击wrapper不叫事件冒泡，叫事件常规执行
            console.log(wrapper);
        },false);
        //事件冒泡
        //点击content会触发content、wrapper两个函数，触发顺序由子元素到父元素
        content.addEventListener('click',function () {
            console.log(content);
        },false);
        //点击box会触发box、content、wrapper三个函数，触发顺序由子元素到父元素
        box.addEventListener('click',function () {
            console.log(box);
        },false);

        //事件捕获  IE上没有捕获事件
        var wrapper1 = document.getElementsByClassName("wrapper")[1];
        var content1 = document.getElementsByClassName("content")[1];
        var box1 = document.getElementsByClassName("box")[1];

        //事件冒泡
        wrapper1.addEventListener('click',function () {
            console.log("wrapper1"+'Bullbe');
        },false);
        content1.addEventListener('click',function () {
            console.log("content1"+'Bullbe');
        },false);
        box1.addEventListener('click',function () {
            console.log("box1"+'Bullbe');
        },false);

        //点击wrapper，触发wrapper函数
        wrapper1.addEventListener('click',function () {
            console.log("wrapper1");
        },true);
        //点击content会触发wrapper、content两个函数，触发顺序由父元素到子元素
        content1.addEventListener('click',function () {
            console.log("content1");
        },true);
        //点击box会触发wrapper、content、box三个函数，触发顺序由父元素到子元素
        box1.addEventListener('click',function () {//点击box1不叫事件捕获，叫事件常规执行
            console.log("box1");
        },true);
        //触发顺序，先捕捉，后冒泡
        //点击box1  console.log 如下：
        // wrapper1
        // content1
        // box1Bubble 这里是函数执行
        // box1
        // content1Bubble
        // wrapper1Bubble


    </script>
</body>
</html>
